<template>
	<view class="search-content">
		<u-navbar bgColor="#f9f9f9" height="50" :safeAreaInsetTop="true" :placeholder="true">
			<view
				class="u-nav-slot"
				slot="left"
			>
				<view style="display: flex;justify-content: flex-start;">
					<u-icon name="arrow-leftward" color="rgb(153 153 153)" size="28" @click="back()"></u-icon>
					<view style="margin-left: 40rpx;"></view>
					<u-search 
						:clearabled="true"
						:animation="true"
						v-model="searchParams.keyword"
						placeholder="请输入要搜索的关键字"
						@search="commit"
						shape="round">
					</u-search>
				</view>
				
			</view>
		</u-navbar>
		<!-- 最新帖子内容 -->
		<u-list @scrolltolower="scrolltolower" :scrollable="isLoad" :scrollTop="scrollSite" v-if="postList.length!=0" >
			<u-list-item
				v-for="(item, index) in postList"
				:key="index"
			>
			<view class="box-post-content" @click="postsClick(item.id)">
				<u-row customStyle="margin-bottom: 8px">
					<u-col span="2">
						<u-avatar size="46" :src="item.userDetailVO.avatar"></u-avatar>
					</u-col>
					<u-col span="10">
						<view>
							<u--text
								:text="item.userDetailVO.nickname"
								type="primary"
								bold
								size="15"
							></u--text>
						</view>
						<view class="u-demo-block__content">
							<view style="flex: 25%;"><u-tag text="数计学院" size="mini" ></u-tag></view>
							<view style="flex: 12%;margin-left: 8rpx;"><u-tag text="19级" type="warning" size="mini"></u-tag></view>
							<view style="flex: 18%;margin-left: 8rpx;"><u-tag text="软件工程" type="success" size="mini" ></u-tag></view>
							<view style="flex: 18%;margin-left: 8rpx;"><u-tag :text="item.type | typeToStr" type="error" size="mini"></u-tag></view>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="12">
						<!-- <u--text size="13" :lines="4" :text="noticeText"></u--text> -->
						<u-parse :content="item.content" :tagStyle="style"></u-parse>
					</u-col>
				</u-row>
				<view class="picture-content">
					<u-album :urls="item.imgUrls" multipleSize="100" :previewFullImage="false"></u-album>
				</view>
			</view>
			</u-list-item>
			<view v-if="flag">
				<u-divider text="我是有底线的" :dashed="true" lineColor="rgb(131 131 133)"></u-divider>
			</view>
		</u-list>
		<u-empty
				v-else
				text="暂未搜索到发布的内容哦!"
				textSize="20"
				textColor="#8f99a3"
				iconColor="blue"
				iconSize="160"
				marginTop="100"
				mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getSearchList} from '../../utils/api.js'
	export default {
		data() {
			return {
				scrollSite: 0,
				flag: false,
				postList: [],
				searchParams: {
					keyword: '',
					pageNo: 1,
					pageSize: 10,
				},
				isLoad: true,
				style: {
					div: 'overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;display: -webkit-box;-webkit-box-orient: vertical;',
					span: 'color: red;font-weight: bold;',
				},
				noticeText: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用;uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用;uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用;',

			}
		},
		filters:{
			typeToStr(type){
				return getApp().getTypeStr(type)
			}
		},
		onLoad(option) {
			this.type = option.type
			this.searchParams.keyword = option.keyword
		},
		onReady() {
			this.search(true)
		},
		methods: {
			back(){
				//当前页
				let pages = getCurrentPages()
				//上个页面
				let beforePage = pages[pages.length - 2]
				let backUrl = beforePage.route
				// 跳转方式
				let skipType = 'redirect'
				console.log('backUrl', backUrl)
				if(backUrl == null || backUrl == 'pages/index/index'){
					// 首页跳转, 只能switchTab方式, 或直接返回上一个页面
					skipType = 'tab'
					backUrl == 'pages/index/index'
				}
				uni.$u.route({
					type: skipType,
					url: backUrl,
					params: {
						type: this.type
					},
				})

				// uni.$u.route({
				// 	type: 'back',
				// 	delta: 1,
				// 	animationType: 'pop-out',
				// 	animationDuration: 200
				// });
			},
			commit(keyword){
				console.log(keyword)
				this.searchParams.keyword = keyword
				this.searchParams.pageNo = 1
				this.isLoad = true
				this.scrollSite = 0
				this.search(true)
			},
			search(sign){	//sign 标记是否是重新搜索
				getSearchList(this.type, {params: this.searchParams}).then(res => {
					const list = res.list
					console.log(list)
					// 图片切割
					for (let i = 0; i < list.length; i++) {
						list[i].imgUrls = list[i].imgUrls!=null?list[i].imgUrls.split(","):[]
					}
					if(sign){
						this.postList = list
					}else {
						this.postList = this.postList.concat(list)
					}
					return list.length > 0
				}).catch(err => {
					getApp().globalData.toast[1].message = '搜索时发生了一个错误'
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							//回调
						}
					})
				})
				return false
			},
			postsClick(id){
				uni.$u.route(`/pages/posts-details/posts-details?id=${id}`);
			},
			scrolltolower() {
				if(!this.isLoad) return
				//下拉加载
				this.searchParams.pageNo++
				let isLoadSucess = this.search(false)
				console.log("加载搜索数据...", isLoadSucess)
				if(!isLoadSucess){
					this.isLoad = false
					this.flag = true
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-content {
		padding-top: 20rpx;
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		.box-post-content {
			margin: 8rpx 20rpx;
			padding: 18rpx 10rpx 30rpx 16rpx;
			border-radius: 16rpx;
			background-color: #fff;
			.picture-content {
				margin-top: 20rpx;
			}
		}
		.u-demo-block__content {
		    display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			
		}
		.isOver {
			padding: 4rpx 0;
			margin-bottom: 2px;
		}
	}
	
</style>
